import React,{useCallback,useState} from "react";
export default function App(){
  console.log('重新渲染');
  const [count,setCount] =useState(0)
  const [num,setNum] =useState(0)

   /* 
    这种创建函数的方式，每次因为各种原因重新渲染组件的时候，都会重新创建函数
  */
  // const addCount = () => {
  //   setCount(count + 1)
  // }
  // const addNum = () => {
  //   setNum(num+1)
  // }
  /* 
    我们可以使用useCallBack创建函数，那么只有我们规定的依赖项发生改变的时候才会重新创建函数，否则一直使用的之前缓存的函数
  */

    const addCount = useCallback(()=>{
      setCount(count+1)
    },[count])

    const addNum = useCallback(()=>{
      setNum(num+1)
    },[num])

    /* const showHello = () => {
    alert("hello")
    } */

    const showHello = useCallback(() => {
      alert("hello" + count)
    }, [])
    
    return (
      <div>
        <h1>App:{count}</h1>
        <button onClick={addCount}>累加count</button>
        <button onClick={addNum}>累加num</button>
        <button onClick={showHello}>欢迎词</button>
      </div>
    )
}